import React from 'react';
import {Row,Col} from 'antd'
import axios from '../../axios'
import Utils from '../../utils/utils.js'
import './index.less'
class Header extends React.Component{
  state={
    userName:"",
    sysTime:"",
    pic:"",
    weather:""
  }
  componentDidMount(){
    this.setState({
      userName:'ly'
    })
    setInterval(()=>{
      let sysTime = Utils.formateDate(new Date().getTime());
      this.setState({sysTime})
    })
    this.getWeatherApi()
  }
  getWeatherApi = ()=>{
    let city = '深圳'
    axios.jsonP({
      url:'http://api.map.baidu.com/telematics/v3/weather?location='+encodeURIComponent(city)+'&output=json&ak=3p49MVra6urFRGOT9s8UBWr2'
    }).then((res)=>{
      if(res.status === 'success'){
        console.log(res);
        let data = res.results[0].weather_data[0];
        this.setState({
          pic:data.dayPictureUrl,
          weather:data.weather
        })
      }
    })
  }
  render(){
    const {userName,sysTime,pic,weather} = this.state
    return(
      <div className="header">
        <Row className="header-top">
          <Col span={24}>
            <span>欢迎,{userName}</span>
            <a href="">退出</a>
          </Col>
        </Row>
        <Row className="breadcrumb">
          <Col span={4} className="breadcrumb-title">
            首页
          </Col>
          <Col span={20} className="weather">
            <span className="date">{sysTime}</span>
            <span className="weather-img">
              <img src={pic} alt="" />
            </span>
            <span className="weather-detail">{weather}</span>
          </Col>
        </Row>
      </div>
    )
  }
}


export default Header;
